<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    .container {
        width: 1000px;
        margin: auto;
    }
    
    .l {
        float: left;
    }
    
    .right {
        float: right;
    }
    
    .clear {
        clear: both;
    }
    
    nav {
        background: #0ed59d;
    }
    
    nav .nav-list li {
        list-style: none;
        float: left;
        padding: 10px 0px;
    }
    
    nav .nav-list li a {
        color: white;
    }
    
    nav .nav-list li a:hover {
        color: red;
    }
    
    nav .search-warp {
        border: 2px solid #17ac82;
        margin-top: 6px;
    }
    
    nav .search-warp input {
        width: 300px;
        height: 26px;
        border: none;
        outline: none;
        text-indent: 10px;
        vertical-align: top;
    }
    
    nav .search-warp button {
        width: 60px;
        height: 26px;
        border: none;
        background: red;
        color: #fff;
        outline: none;
        vertical-align: top;
    }
    
    nav .search-warp button:hover {
        background-color: #c70e0e;
    }
    
    .der {
        height: 430px;
        width: 1000px;
        margin: 0px auto;
        position: relative;
    }
    
    .der ul li {
        position: absolute;
        display: none;
        list-style: none;
    }
    
    .der ul li:first-child {
        display: block;
    }
    
    .der ul li img {
        width: 1000px;
    }
    
    .nav-list li a {
        text-decoration: none;
    }
    
    .nav-list li {
        color: white;
        width: 90px;
    }
    
    .der ul li {
        position: absolute;
        display: none;
        list-style: none;
    }
    
    .a-tr {
        display: none;
    }
    
    .a-tr-l,
    .a-tr-right {
        width: 40px;
        height: 80px;
        background-color: rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 50%;
        margin-top: -30px;
        cursor: pointer;
        text-align: center;
        line-height: 80px;
        color: #fff;
        font-weight: 700;
        font-size: 35px;
    }
    
    .a-tr-l:hover,
    .a-tr-right:hover {
        background-color: rgba(0, 0, 0, .5);
    }
    
    .der:hover .a-tr {
        display: block;
    }
    
    .a-tr-l {
        left: 0;
    }
    
    .a-tr-right {
        right: 0;
    }
    
    .der ol {
        list-style: none;
        width: 80px;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -40px;
    }
    
    .der ol li {
        width: 16px;
        height: 16px;
        background: #eee;
        border-radius: 16px;
        float: left;
        margin: 0px 2px;
        cursor: pointer;
    }
    
    .der ol .active {
        background: red;
    }
    
    .tab-title {
        border-bottom: 2px solid #17ac82;
        list-style: none;
        overflow: hidden;
        margin-top: 10px;
    }
    
    .tab-title li {
        line-height: 30px;
        padding: 0px 20px;
        float: left;
        cursor: pointer;
    }
    
    .tab-title .active {
        background: #17ac82;
        color: #fff;
    }
    
    .con .list {
        list-style: none;
        display: none;
    }
    
    .con .list:first-child {
        display: block;
    }
    
    .con .list li {
        padding: 10px 0px;
        border-bottom: 1px solid #eee;
    }
    
    .con .avatar {
        width: 90px;
        height: 90px;
    }
    
    .con .avatar img {
        width: 90px;
        height: 90px;
    }
    
    .con .right {
        width: 900px;
    }
    
    .con .right p:first-child {
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .f-top form {
        width: 80%;
        height: 400px;
        background-color: #09f3b1e8;
        margin: auto;
        padding: 20px;
    }
    
    .f-top form input {
        display: block;
        width: 90%;
        height: 50px;
        margin: 30px auto;
        font-size: 20px;
    }
    
    .f-top form a {
        display: block;
        width: 30%;
        height: 46px;
        margin: 0px auto;
        background-color: black;
        color: white;
        font-size: 25px;
        text-decoration: none;
        text-align: center;
        line-height: 46px;
    }
    
    .dibu {
        padding: 50px 0px;
        text-align: center;
        line-height: 2;
        background: black;
        margin-top: 20px;
        color: #fff;
    }
    
    #time {
        color: red;
        font-size: 20px;
    }
</style>

<body>
    <!--头部-->
    <header>
        <nav>
            <div class="container">
                <ul class="nav-list l">
                    <li><a href="">首页</a></li>
                    <li><a href="">产品列表</a></li>
                    <li><a href="">品牌排行</a></li>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">留言板</a></li>
                    <li><a href="">关于</a></li>
                </ul>
                <div class="search-warp right">
                    <input type="text" placeholder="请输入" name="" id="" value="" />
                    <button>搜索</button>
                </div>
                <div class="clear"></div>
            </div>
        </nav>
    </header>
    <!-- 轮播图 -->
    <div class="der">
        <ul>
            <li>
                <a href="#"><img src="img/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/4.jpg" alt=""></a>
            </li>
        </ul>
        <!--箭头-->
        <div class="a-tr">
            <span class="a-tr-l">&lt;</span>
            <span class="a-tr-right">&gt;</span>
        </div>
        <!-- 圆点 -->
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!-- tab切换 -->
    <div class="container">
        <ul class="tab-title">
            <li class="active">最新发布</li>
            <li>智能匹配</li>
        </ul>
        <div class="con">
            <ul class="list">

            </ul>
            <ul class="list"></ul>
        </div>
    </div>
    <!-- 表单验证 -->
    <div class="container f-top">
        <h2 style="text-align: center;color: #17ac82;margin: 20px 0px;">联系方式</h2>
        <form action="" method="post">
            <input id="username" type="text" value="" placeholder="请输入账号6到8位数字或英文构成" />
            <input id="password" type="password" value="" placeholder="请输入6位数字密码" />
            <input id="tel" type="tel" value="" placeholder="请输入电话号码" />
            <input id="email" type="email" value="" placeholder="请输入邮箱地址" />
            <a href="JavaScript:void(0)" onclick="yanzheng(event)">发送</a>
        </form>
    </div>
    <!-- 倒计时 -->
    <div class="dibu">
        距离2023年1月1月还有 <span id="time"></span>
        <p>加油！奥里给！</p>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/mock.js"></script>
    <script src="js/mock_ajax.js"></script>
    <script>
        $(function() {
            //轮播图
            var index = 0;

            function autoPlay() {
                index++
                if (index == $(".der ul li").length) {
                    index = 0;
                }
                $(".der ul li").eq(index).fadeIn().siblings().fadeOut();
                $(".der ol li").eq(index).addClass("active").siblings().removeClass("active");
            }
            //自动轮播
            var timer = setInterval(autoPlay, 1400);
            $(".der").hover(function() {
                clearInterval(timer);
            }, function() {
                timer = setInterval(autoPlay, 1400);
            });
            //下一个
            $(".a-tr-right").on("click", function() {
                index++
                if (index == $(".der ul li").length) {
                    index = 0
                }
                $(".der ul li").eq(index).fadeIn().siblings().fadeOut();
                $(".der ol li").eq(index).addClass("active").siblings().removeClass("active");
            });
            //上一个
            $(".a-tr-l").on("click", function() {
                index--
                if (index == -1) {
                    index = $(".der ul li").length - 1
                }
                $(".der ul li").eq(index).fadeIn().siblings().fadeOut();
                $(".der ol li").eq(index).addClass("active").siblings().removeClass("active");
            });
            //圆按钮点击
            $(".der ol li").click(function() {
                $(this).addClass("active").siblings().removeClass("active");
                index = $(this).index();
                $(".der ul li").eq(index).fadeIn().siblings().fadeOut();
            });
        });
        //tab切换
        $(function() {
            $.ajax({
                type: "get",
                url: "/list1",
                async: true,
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    showlist(data);
                }
            });
            $.ajax({
                type: "get",
                url: "/list2",
                async: true,
                dataType: "json",
                success: function(data) {
                    showlist2(data);
                }
            });
            //处理数据
            function showlist(data) {
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    console.log(data[i].data.desc)
                    console.log(data[i].data.img)
                    str += `
					<li>
				<div class="avatar l">
                    <img src="${data[i].data.img}" alt="">
                    </div>
					<div class="content right">
					<p>${data[i].data.title}</p>
					<p class="des">${data[i].data.desc}</p>
					</div>
					<div style="clear: both;"></div>
					</li>
					`;
                }
                $(".list").eq(0).html(str);
            }

            function showlist2(data) {
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    str += `
				<li>
                    <div class="avatar l">
                        <img src="${data[i].data.img}" alt="">
                    </div>
                    <div class="content right">
                        <p>${data[i].data.title}</p>
                        <p class="des">${data[i].data.desc}</p>
                    </div>
                        <div style="clear: both;"></div>
				</li>
					`;
                }
                $(".list").eq(1).html(str);
            }
            //点击标题切换内容
            $(".tab-title li").click(function() {
                console.log($(this).index());
                $(this).addClass("active").siblings().removeClass("active");
                $(".list").eq($(this).index()).show().siblings().hide();
            });
        });
        //js部分
        //验证功能
        function yanzheng(e) {
            var username = document.getElementById("username").value;
            var reg = /^[0-9a-zA-Z]{6,8}$/g;
            if (!reg.test(username)) {
                alert("账号不对");
                return false;
            }
            var passwords = document.getElementById("password").value;
            var regpasswords = /^[0-9]{6}$/g;
            if (!regpasswords.test(passwords)) {
                alert("密码不对");
                return false;
            }
            var tel = document.getElementById("tel").value;
            var regtel = /^1[0-9]{10}$/g;
            if (!regtel.test(tel)) {
                alert("电话号码不对");
                return false;
            }
            var email = document.getElementById("email").value;
            var regemail = /^\w+@\w+.\w+$/g;
            if (!regemail.test(email)) {
                alert("邮箱不对");
                return false;
            }
        }
        //倒计时
        function showTime() {
            setInterval(function() {
                var now = new Date();
                var dat = new Date(2023, 0, 1);
                var pit = Math.floor((dat - now) / 1000 / 60 / 60 / 24);
                var hour = Math.floor((dat - now) / 1000 / 60 / 60 % 24);
                var min = Math.floor((dat - now) / 1000 / 60 % 60);
                var s = Math.floor((dat - now) / 1000 % 60);
                hour = hour >= 10 ? hour : "0" + hour;
                min = min >= 10 ? min : "0" + min;
                s = s >= 10 ? s : "0" + s;
                document.getElementById("time").innerHTML = pit + "天" + hour + "时" + min + "分" + s + "秒";
            }, 1000);
        }
        showTime();
    </script>
</body>

</html>